<!-- src/views/WordBookDetail.vue -->
<template>

  <div class="word-book-detail">

    <el-button type="primary" icon="el-icon-arrow-left" @click="goBack" style="display: block;">返回</el-button>

    <div class="book-detail-body">
      <div class="bookCover">
        <WordBook
          :title="wordBook.title"
          :wordCount="wordBook.wordCount"
          :author="wordBook.author"
          :createDate="wordBook.createDate"
        />
        <el-button type="primary" @click="turnLearnWordBook"> {{ turnLearnButtonContent }}</el-button>
        <el-button type="warning" @click="deleteLearnedRecord" v-show="whetherLearned && !whetherLearning" style="margin: 0px">删除学习记录</el-button>
      </div>

      <div class="tableDetail">
        <el-table :data="wordList">
          <el-table-column prop="word" label="单词" width="180" />
          <el-table-column prop="translation" label="翻译" />
        </el-table>
        <el-pagination
          :page-size="pageSize"
          :total="totalWords"
          layout="prev, pager, next"
          @current-change="handlePageChange"
        />
    </div>

    </div>

  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import WordBook from '@/components/WordBook.vue';
import { httpClient } from "@/libs/http-client";
import { ElMessage } from 'element-plus'

const router = useRouter();



const wordBook = ref({
  bookId: 0,
  title: '示例单词书',
  wordCount: 100,
  author: '',
  createDate: '2025-04-15',
});

const wordList = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const totalWords = ref(0);
const whetherLearning = ref(false);
const whetherLearned = ref(false)


// 获取学习状态
const getLearningStatus = ()=>{
  httpClient.get('/word/getLearnStatus', {params: {
    wordBookId: wordBook.value.bookId
  }})
  .then((data) => {
    console.log(data);
    whetherLearning.value = data.isLearning;
    whetherLearned.value = data.existRecord;
  })
}

// 学习单词书或取消学习
const turnLearnWordBook = () => {
  if(whetherLearning.value){
    httpClient.post('/word/cancelLearnWordBook', {
      wordBookId: wordBook.value.bookId
    })
    .then((data) => {
      whetherLearning.value = false;
      ElMessage("取消学习成功")
      whetherLearned.value = true;
    })
  }
  else {
    httpClient.post('/word/learnWordBook', {
      wordBookId: wordBook.value.bookId
    })
   .then((data) => {
      whetherLearning.value = true;
      ElMessage("学习成功")
      whetherLearned.value = true;
    })
  }
}

// 删除学习记录
const deleteLearnedRecord = () => {
  httpClient.delete('/word/deleteLearnRecord', {
    params: {
      wordBookId: wordBook.value.bookId
    }
  })
  .then((data) => {
    ElMessage("删除成功")
    whetherLearned.value = false;
  })
}

const turnLearnButtonContent = computed(() => {
  return whetherLearning.value ? '取消学习' : '学习单词书';
});




const goBack = () => {
  router.go(-1);
};

const handlePageChange = (newPage) => {
  currentPage.value = newPage;
  getWordList();
};

const getWordList = () => {
  if(wordBook.value.bookId == 0 || wordBook.value.bookId == undefined)
  {
    ElMessage("单词书数据不存在")
    return;
  }
  // 发起请求获取单词列表
  httpClient.get('/word/getWordList', {
    params: {
      wordBookId: wordBook.value.bookId,
      pageNum: currentPage.value,
      pageSize: pageSize.value,
    },
  })
    .then((data) => {
      wordList.value = [];
      totalWords.value = data.total;
      data.records.forEach((word) => {
        wordList.value.push({
          word: word.word,
          translation: word.meaning,
        });
      })
    })
}

onMounted(() => {
  const router = useRouter();
  // 获取query参数
  const querys = router.currentRoute.value.query;
  console.log(querys);
  wordBook.value.bookId = querys.bookId;
  wordBook.value.title = querys.bookName;
  wordBook.value.wordCount = querys.wordCount;
  wordBook.value.createDate = querys.createDate;
  getWordList();
  getLearningStatus();

});
</script>

<style scoped>
.word-book-detail {
  padding: 20px;
}
.book-detail-body {
  display: flex;
  justify-content: left;
  padding: 20px;
  gap: 20px;
}
.bookCover {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: left;
  gap: 10px;

}
.tableDetail {
  flex: 1;
}
</style>
